<template>
  <div class="cart">
    <header>
      <i @click="goBack"> < </i>
      <span>购物车</span>
      <span v-if="!isEditing" @click="toggleEdit">编辑</span>
      <span v-else @click="toggleEdit">完成</span>
    </header>
  </div>
  <section>
    <ul>
      <li v-for="(item, index) in lists" :key="item.id">
        <div class="check">
          <van-checkbox
            class="vantcheck"
            @click="checkItem(index)"
            v-model="item.checked"
          ></van-checkbox>
        </div>
        <h2>
          <img :src="item.goods_imgUrl" alt="" />
        </h2>
        <div class="goods">
          <div class="goods-title">
            <span>{{ truncateText(item.goods_name, 25) }}</span>
          </div>
          <div class="goods-num">
            <div class="goods-price">￥{{ item.goods_price }}</div>
            <van-stepper
              @change="changeNum($event, item)"
              v-model="item.goods_num"
              integer
            ></van-stepper>
          </div>
        </div>
        <div class="delete" v-if="isEditing" @click="deleteItem(index)">删除</div>
      </li>
    </ul>
  </section>
  <footer>
    <div class="redio">
      <van-checkbox @click="checkAllFn" v-model="isCheckedAll"></van-checkbox>
    </div>
    <div class="total">
      <div>
        全选（<span class="total-active">{{ total.num }}</span
        >）
      </div>
    </div>
    <div class="order">
      <div class="order-price">
        <span class="total-active">￥{{ total.price }}</span>
      </div>
      <div class="order-jiesuan" @click="goOrder">结算</div>
    </div>
  </footer>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
// const checked = ref(true)
const value = ref(1);

import { useRouter } from "vue-router";
let router = useRouter();
const goBack = () => {
  router.push("/");
};
// 编辑状态
const isEditing = ref(false);
const toggleEdit = () => {
  isEditing.value = !isEditing.value;
};
// 删除商品
const deleteItem = (index) => {
  const itemId = lists.value[index].id; // 获取要删除的商品的 ID
  lists.value.splice(index, 1);
  http.$axios({
    url: `/api/deleteCart`,
    method: "post",
    headers: {
      token: true,
    },
    data: {
      id: itemId,
    },
  }).then((res) => {
    console.log("删除成功", res);
  })
  .catch((error) => {
    console.error("删除失败", error);
    // 如果删除失败，可以考虑将商品重新添加到本地列表中
    lists.value.splice(index, 0, cartStore.list[index]);
  });
};
onMounted(() => {
  getData();
  isCheckedAll.value = cartStore.isCheckedAll;
});
// 名字只显示两行
const truncateText = (text, maxLength) => {
  if (text.length > maxLength) {
    return text.slice(0, maxLength) + "..."; 
  } 
}
import http from "@/common/api/request.js";
let lists = ref([]);
import { useCartStore } from "../store/cart.js";
const cartStore = useCartStore();
import { storeToRefs } from "pinia";
const { total } = storeToRefs(cartStore);
const getData = async () => {
  let res = await http.$axios({
    url: "/api/selectCart",
    method: "post",
    headers: {
      token: true,
    },
  });
  console.log("购物车数据", res);
  res.data.forEach((v) => {
    v["checked"] = true;
  });
  cartStore.cartList(res.data);
  lists.value = cartStore.list;
};
let checkItem = (i) => {
  cartStore.check_item(i);
};
let checkAllFn = () => {
  cartStore.checkAllFn();
};
let isCheckedAll = ref("");
watch(
  lists,
  () => {
    isCheckedAll.value = lists.value.every((item) => item.checked);
  },
  { deep: true }
);

//修改数据
const changeNum = (value, item) => {
  console.log(value, item);
  http.$axios({
    url: "/api/updateNum",
    method: "post",
    headers: {
      token: true,
    },
    data: {
      id: item.id,
      num: value,
    },
  });
};
import { useOrderStore } from "../store/order.js";
const orderStore = useOrderStore();
//跳转到结算页面
const goOrder = () => {
  if (!cartStore.selectList.length) {
    return;
  }

  //选中商品的新数组
  let newList = [];
  lists.value.forEach((item) => {
    cartStore.selectList.filter((v) => {
      if (v == item.id) {
        newList.push(item);
      }
    });
  });
  //生成订单
  http
    .$axios({
      url: "/api/addOrder",
      method: "post",
      headers: {
        token: true,
      },
      data: {
        arr: newList,
      },
    })
    .then((res) => {
      console.log("res666", res);
      if (!res.success) return;
      orderStore.initOrder(res.data);
      //跳转提交订单也买你
      router.push({
        path: "/order",
        query: {
          detail: JSON.stringify(cartStore.selectList),
        },
      });
    });

  // router.push({
  //  path:'/order',
  //  query:{
  //      detail:JSON.stringify(cartStore.selectList)
  //  }
  // })
};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.173333rem;
  color: #fff;
  background-color: #ff5777;
}

header i {
  padding: 0 0.4rem;
  font-size: 0.586666rem;
}

header span {
  padding: 0 0.4rem;
  font-size: 0.426666rem;
}

section {
  background-color: #f5f5f5;
}

section ul {
  display: flex;
  flex-direction: column;
}

section ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.16rem 0.533333rem;
  margin: 0.213333rem 0;
  background-color: #fff;
}

section ul li .check {
  padding-right: 0.373333rem;
}

section ul li .goods {
  display: flex;
  height: 2.525rem;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 0.4rem;
  font-size: 0.32rem;
}

section ul li .goods .goods-title {
  display: flex;
  font-size: 0.355rem;
  font-weight: 700;
}

section ul li .goods .goods-title i {
  font-size: 0.586666rem;
}

section ul li .goods .goods-price {
  padding: 0.08rem 0;
  color: #ff5777;
  font-weight: 700;
  font-size: 0.4375rem;
}

section ul li .goods .goods-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section ul li img {
  width: 1.973333rem;
  height: 2.573333rem;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.28rem;
  border-top: 0.053333rem solid #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

footer .radio {
  padding: 0 0.4rem;
}

footer .total {
  flex: 1;
  font-size: 0.32rem;
}

footer .total .total-active {
  color: #ff5777;
}

footer .order {
  width: 4.4rem;
  text-align: center;
  font-size: 0.426666rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer .order .order-price {
  color: #ff5777;
  line-height: 1.28rem;
  font-weight: 700;
}

footer .order .order-jiesuan {
  padding: 0.125rem 0.3875rem;
  height: 0.6375rem;
  background-color: #ff5777;
  color: #fff;
  font-size: 0.4125rem;
  line-height: 0.6375rem;
  border-radius: 0.4rem;
}
section ul li .delete {
  color: red;
  cursor: pointer;
  font-size: 0.32rem;
  width: 1.3rem;
}
</style>
